<div id="button-container">
<button class="button" id="youtube">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
  <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
</svg>
</button>
<button class="button" id="github">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</button>
<button class="button" id="dribbble">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"></circle>
  <path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path>
</svg>
</button>
<button class="button" id="instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
</button>
<button class="button" id="facebook">
<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</button>
<button class="button" id="share">
<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
  <circle r="3" cy="5" cx="18"></circle>
  <circle r="3" cy="12" cx="6"></circle>
  <circle r="3" cy="19" cx="18"></circle>
  <line y2="17.49" x2="15.42" y1="13.51" x1="8.59"></line>
  <line y2="10.49" x2="8.59" y1="6.51" x1="15.41"></line>
</svg>
</button>
</div>
<style>
/* From Uiverse.io by arshshaikh06 - Source: https://www.behance.net/gallery/117113957/Social-Share-Animation-Daily-UI-010 - Tags: button, hover, hover button, css button, css animation, cool button, button hover effect  */
#button-container {
  position: relative;
}

.button {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% 50%;
  background: #F4F7F5;
  border: none;
  border-radius: 25px;
  height: 50px;
  width: 50px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in;
}

#share {
  color: #DC0654;
  background: #fbe6ed;
}

#facebook {
  background: linear-gradient(-160deg, #00D2FF, #3A7BD5);
}

#instagram {
  background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);
}

#dribbble {
  background: linear-gradient(-70deg, #D70652, #FF025E);
}

#github {
  background: linear-gradient(-70deg, #171515, #FF025E);
}

#youtube {
  background: #FF0000;
}

#button-container:hover button {
  rotate: 360deg;
}

#button-container:hover #share {
  rotate: 270deg;
}

#button-container:hover > #facebook {
  translate: -300% 50%;
}

#button-container:hover > #instagram {
  translate: -226.78% -126.78%;
}

#button-container:hover > #dribbble {
  translate: -50% -200%;
}

#button-container:hover > #github {
  translate: 126.78% -126.78%;
}

#button-container:hover > #youtube {
  translate: 200% 50%;
}
</style>
